<template>
  <div class="tsb-table-wrapper">
    <div class="order-dropdown-box">
      <div class="order-tips">
        <svg-icon iconClass="error" />
        <span>翻译币消耗记录将有短暂延迟，请稍后刷新查看最新明细。</span>
      </div>
      <span>时间：</span>
      <el-date-picker
        v-model="monthValue"
        value-format="YYYY-MM"
        :editable="false"
        :clearable="false"
        type="month"
        style="width: 108px"
        @change="searchList"
      />
      <span style="margin: 0 4px 0 24px">类型：</span>
      <el-select
        v-model="selectStatusItem"
        @change="searchList"
        style="width: 108px"
      >
        <el-option
          v-for="item in statusList"
          :key="item.name"
          :label="item.name"
          :value="item"
        />
      </el-select>
    </div>
    <el-table
      :data="tableData"
      empty-text="暂无数据"
      size="large"
      v-loading="listLoading"
      height="100%"
      ref="elTable"
      class="order-table"
    >
      <el-table-column
        align="center"
        prop="op_text"
        header-align="center"
        label="类型"
        min-width="80"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="内容"
        min-width="150"
      >
        <template v-slot="scope">
          <span style="word-break: break-word">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="数量"
        min-width="80"
      >
        <template v-slot="scope">
          {{ scope.row.op_type == "add" ? "+" : "-" }}{{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="时间"
        prop="created_at"
        min-width="150"
      />
    </el-table>
  </div>
</template>
<script setup lang="ts" name="TsbTable">
import { ref, computed, watch, onMounted, onActivated, nextTick, getCurrentInstance } from "vue";
import { parseTime } from "@/utils";
import { tsbOrderListApi } from "@/api/order";
const currInstance: any = getCurrentInstance()
const listLoading = ref(false);
const monthValue = ref<string>(parseTime(new Date(), "{y}-{m}") as string);
const has_more = ref(false); // 采用滚动分页原因: 后端计算明细总量会耗比较多的性能
const tableData = ref<any[]>([]);
const statusList = ref([
  { name: "全部", value: null },
  { name: "收入", value: "add" },
  { name: "支出", value: "dec" }
]);
const selectStatusItem = ref(statusList.value[0]);
onActivated(() => {
  getList();
});
onMounted(() => {
  getList();

  nextTick(() => {
    const scrollEl = currInstance.refs.elTable?.$refs.bodyWrapper?.querySelector(
      ".el-scrollbar__wrap"
    );
    scrollEl &&
      scrollEl.addEventListener("scroll", (e: Event) => {
        handleScroll(e);
      });
  });
});
function getList(isReset = true) {
  const params:any = {
    unit_id: "tsb",
    page_size: 20,
    month: monthValue.value
  };
  const last_id = isReset ? null : tableData.value.slice(-1)[0]?.offset;
  if (last_id) {
    params.last_id = last_id;
  }
  if (selectStatusItem.value.value) {
    params.op_type = selectStatusItem.value.value;
  }
  listLoading.value = true;
  tsbOrderListApi(params)
    .then((res) => {
      const data = res.data || {};
      let list = (data.list || []).map((it: any) => {
        const { created_at, op_type } = it;
        it.created_at = parseTime(created_at, "{y}-{m}-{d} {h}:{i}");
        it.op_text = op_type === "add" ? "收入" : "支出";
        return it;
      });
      if (last_id) {
        list = tableData.value.concat(list);
      } else {
        const scrollEl =
          currInstance.refs.elTable?.$refs.bodyWrapper?.querySelector(
            ".el-scrollbar__wrap"
          );
        scrollEl && (scrollEl.scrollTop = 0);
      }
      tableData.value = list;
      has_more.value = data.has_more;
    })
    .finally(() => {
      nextTick(() => {
        listLoading.value = false;
      });
    });
}
function searchList() {
  getList();
}
function handleScroll(e: any) {
  const el: HTMLElement | null = e.target;
  if (listLoading.value || !has_more.value || !el) return;
  const bh = el.scrollTop + el.offsetHeight;
  const bodyEl: HTMLElement | null = el.querySelector(".el-scrollbar__view");
  const ih = bodyEl?.offsetHeight || 0;
  const o = ih - bh;
  if (o < 50) {
    getList(false);
  }
}
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  padding: 0 14px;
  border-radius: 6px;
}
:deep(.el-input.is-focus .el-input__wrapper),
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
:deep(.el-table__cell .cell) {
  color: var(--el-text-color-primary);
}
:deep(.el-table__empty-text) {
  margin-top: 30px;
}

.tsb-table-wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100% - 56px - 20px);
}
</style>
